<template>
  <!-- <div v-show="isAdd">
    <case-adder
      @closeAdder="closeCaseAdder"
      @add-case="addCase"
      roy="java"
      job="老师"
    ></case-adder>
  </div> -->
  <el-dialog title="新增测试用例" v-model="isAdd" width="30%">
    <el-form :model="newCase" label-width="80px" :inline="false" size="normal">
      <el-form-item label="用例名">
        <el-input v-model="newCase.caseName"></el-input>
      </el-form-item>
      <el-form-item label="步骤名">
        <el-input v-model="newCase.stepName"></el-input>
      </el-form-item>
      <el-form-item label="关键字">
        <el-select
          v-model="newCase.keywords"
          placeholder="请选择关键字"
          clearable
          filterable
        >
          <el-option
            v-for="item in keywordsList"
            :key="item.keyword"
            :label="item.keyName"
            :value="item.keyword"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="参数1">
        <el-input v-model="newCase.param1"></el-input>
      </el-form-item>
      <el-form-item label="参数2">
        <el-input v-model="newCase.param2"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span>
        <el-button @click="isAdd = false">取消</el-button>
        <el-button type="primary" @click="addCase">确认</el-button>
      </span>
    </template>
  </el-dialog>

  <case-table
    :caseList="caseList"
    @caseTableChange="changeCase"
    @caseTableDelete="deleteCase"
    @openAdder="openCaseAdder"
  ></case-table>

  <!-- <div v-show="isCounter">
    <slot-counter @closeCounter="closeTimer" :counterName="compName">
      <template #guest>
        <i>打工人</i>
      </template> -->

  <!-- <template #position="posTimes"> -->
  <!-- <template #position="{ times }">
        <strong>{{ compName }}</strong>
        <Times :times="times"></Times>
        <button @click="counterTimes = times">点我赋值</button>
      </template>
    </slot-counter>
  </div>
  <button v-show="!isCounter" @click="isCounter = true">点我打开计数器</button>
  <div>子组件外部的次数：{{ counterTimes }}</div> -->
</template>

<script lang="ts" setup>
import { ref, onUpdated, provide, type Ref, reactive } from "vue";
// import type { Ref } from "vue";
import CaseAdder from "./case/CaseAdder.vue";
import CaseTable from "./case/CaseTable.vue";
import type { SunnyCase, CaseShow } from "@/types/sunnyCase/types";
import type { Keywords } from "@/types/keywords/type";
onUpdated(() => {
  console.log("Main组件更新了↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑");
});
// import MyCounter from "@/components/countersLearn/MyCounter.vue";
// import Times from "./countersLearn/Times.vue";
// import SlotCounter from "./countersLearn/SlotCounter.vue";
// let compName = ref("主界面");

//isAdd用于控制是否显示新增组件。
let isAdd = ref(false);
// let counterTimes = ref(0);
// //控制关闭或者打开counter的属性
// let isCounter = ref(false);

// function closeTimer() {
//   isCounter.value = false;
// }

//用于和模板中的拥有对应ref属性的元素进行绑定。
// const caseFormRef = ref(null);

let keywordsList = ref<Keywords[]>([
  {
    keyName: "打开浏览器",
    keyword: "openBrowser",
  },
  {
    keyName: "点击",
    keyword: "click",
  },
  {
    keyName: "输入",
    keyword: "input",
  },
  {
    keyName: "滑动",
    keyword: "moveOver",
  },
]);

let caseList = ref<SunnyCase[]>([
  {
    id: 1,
    caseName: "接口测试",
    stepName: "请求登录",
    keywords: "post",
    param1: "name",
    param2: "password",
  },
  {
    id: 2,
    caseName: "接口测试",
    stepName: "请求登录",
    keywords: "post",
    param1: "name",
    param2: "password",
  },
  {
    id: 3,
    caseName: "接口测试",
    stepName: "请求登录",
    keywords: "post",
    param1: "name",
    param2: "password",
  },
  {
    id: 4,
    caseName: "接口测试",
    stepName: "请求登录",
    keywords: "post",
    param1: "name",
    param2: "password",
  },
  {
    id: 5,
    caseName: "接口测试",
    stepName: "请求登录",
    keywords: "post",
    param1: "name",
    param2: "password",
  },
  {
    id: 6,
    caseName: "接口测试",
    stepName: "请求登录",
    keywords: "post",
    param1: "name",
    param2: "password",
  },
]);

let newCase = reactive<CaseShow>({
  caseName: "",
  stepName: "",
  keywords: "",
  param1: "",
  param2: "",
});

//提供依赖。
provide("changeCase", changeCase);
provide("roy", "肉老师");

function deleteCase(mycase: SunnyCase) {
  console.log("要删除的用例是：", mycase);
  caseList.value.splice(caseList.value.indexOf(mycase), 1);
  console.log("触发删除操作的对象是", event!.target);

  // caseList.value= caseList.value.filter((element)=>{
  //   return element.id!==mycase.id;
  // })
}

function addCase() {
  let lastId = caseList.value[caseList.value.length - 1].id;
  console.log(lastId);
  //扩展操作符赋值，深拷贝
  let addCase: SunnyCase = { ...newCase, id: 0 };
  //如果直接push newCase是浅拷贝，会导致每次添加的元素都一起变化
  addCase.id = lastId + 1;
  caseList.value.push(addCase);
  isAdd.value = false;
}

//修改用例的实际回调函数。
function changeCase(caseId: number, caseKey: string, caseValue: string) {
  console.log("这是Main组件中的changeCase方法");
  // caseList.value = caseList.value.map((originCase) => {
  //   if (originCase.id === caseId) {
  //     let newCase = { ...originCase };
  //     newCase[caseKey] = caseValue;
  //     return newCase;
  //   } else {
  //     return originCase;
  //   }
  // });
  caseList.value.forEach((originCase) => {
    if (originCase.id === caseId) {
      originCase[caseKey] = caseValue;
    }
  });
}

//用于关闭Adder组件
function closeCaseAdder() {
  isAdd.value = false;
}

function openCaseAdder() {
  isAdd.value = true;
}
</script>

<style lang="scss" scoped></style>
